<template>
	<view class="box">
		<!-- logo -->
		<view class="login_title">
			欢迎登录小U商城
		</view>
		<image class="login_logo" src="../../static/images/logo1.png" alt="" />
		<button class="login_but" hover-class="touchOpacity" @getphonenumber="getPhone" open-type="getPhoneNumber">
			微信用户一键登录
		</button>
		<view class="login_text" hover-class="touchOpacity">手机号验证注册/登录</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		onLoad() {},
		methods: {
			getPhone(e) {
				console.log(e);
				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
					// 用户拒绝
					wx.showToast({
						title: '您以拒绝',
						icon: 'error'
					})
				} else {
					// 用户允许
					wx.showToast({
						title: '获取成功',
						icon: 'success'
					})
					// 密文
					let encryptedData = e.detail.encryptedData
					// iv
					let iv = e.detail.iv
					wx.login({

						success: async res => {
							console.log(res.code);
							let code = res.code;
							let result = await this.$http({
								url: '/wxlogin',
								method: 'post',
								data: {
									encryptedData,
									iv,
									code
								}

							})
							console.log(result);
							// 将用户信息存储在本地
							wx.setStorageSync('userInfo', result.data.list);
							// 将用户信息存储在仓库
							this.$store.commit('changeUser', result.data.list);
							// 更改仓库中的登录状态
							this.$store.commit('changeLogin', true)
							// 登录状态存储在本地
							wx.setStorageSync('isLogin', true)
						}
					})
				}
			}
		}
	}
</script>

<style>
	/* 导入外部的样式文件 */
	/*@import url("@/static/css/login.css"); */
	.box {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.login_title {
		font-size: 48rpx;
		color: #666666;
		margin: 380rpx 0 48rpx 0;
	}

	.login_logo {
		width: 364rpx;
		height: 98rpx;
	}

	.login_but {
		margin: 64rpx 0 40rpx 0;
		width: 670rpx;
		line-height: 98rpx;
		text-align: center;
		background-color: #FF6040;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.login_text {
		color: #333333;
		font-size: 24rpx;
	}
</style>